<template>
    <div id="legend">
      <ul>
        <li v-for="legend in legendListData" :key="legend.id">
          <img :src="legend.imgurl" style="vertical-align:middle" width="26" height="26">
          <span>{{legend.name}}</span>
        </li>
      </ul>
    </div>
</template>

<script>
  import CarType from '../sub-home/carType.vue'
  import EnergyChart from '../sub-home/energyChart.vue'
  import OnlineChart from '../sub-home/onlineChart.vue'
  import WarnChart from '../sub-home/warnChart.vue'
    export default {
        name: 'LeftChart',
        data () {
            return {
              legendListData: [
                {
                  id: '0',
                  imgurl: './static/images/infrastructure/icon-1.png',
                  name: '客运企业'
                },
                {
                  id: '1',
                  imgurl: './static/images/infrastructure/icon-2.png',
                  name: '物流企业'
                },
                {
                  id: '2',
                  imgurl: './static/images/infrastructure/icon-3.png',
                  name: '旅游客运企业'
                },
                {
                  id: '3',
                  imgurl: './static/images/infrastructure/icon-4.png',
                  name: '驾驶员培训学校'
                },
                {
                  id: '4',
                  imgurl: './static/images/infrastructure/icon-5.png',
                  name: '公交企业'
                },
                {
                  id: '5',
                  imgurl: './static/images/infrastructure/icon-6.png',
                  name: '客运站'
                },
                {
                  id: '6',
                  imgurl: './static/images/infrastructure/icon-7.png',
                  name: '出租客运企业'
                },
                {
                  id: '7',
                  imgurl: './static/images/infrastructure/icon-8.png',
                  name: '加油站'
                },
                {
                  id: '8',
                  imgurl: './static/images/infrastructure/icon-9.png',
                  name: '危货货运运输企业'
                },
                {
                  id: '9',
                  imgurl: './static/images/infrastructure/icon-10.png',
                  name: '加气站'
                },
                {
                  id: '10',
                  imgurl: './static/images/infrastructure/icon-11.png',
                  name: '货运出租服务企业'
                },
                {
                  id: '11',
                  imgurl: './static/images/infrastructure/icon-12.png',
                  name: '监测站'
                },
                {
                  id: '12',
                  imgurl: './static/images/infrastructure/icon-13.png',
                  name: '维修企业'
                },
                {
                  id: '13',
                  imgurl: './static/images/infrastructure/icon-14.png',
                  name: '充电桩'
                },

              ]
            }
        },
        mounted(){

        },
    }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
    #legend {
      position: absolute;
      bottom: 0;
      right: 0;
      width:420px;
      height: auto;
      pointer-events: auto;
      margin-right: -15px;
     /* @include inputBorder;
*/
      ul{
        margin: 0;
        padding: 0px;
        height: auto;
        list-style: none;
        text-align: left;

        li{
          width:50%;
          box-sizing: border-box;
          height: 30px;
          float:left;
          display:block;
          margin-top: 6px;
          margin-bottom: 0px;

          span{
            margin-left: 12px;
            font-size: $font-mid;
            color: #d6e0f2;
            font-family: "Microsoft YaHei UI";
            line-height: 30px;
          }
        }
      }
    }
</style>
